<script setup lang="ts">
import { ref } from 'vue';
// import SvgIcon from './SvgIcon.vue';
import { NavItem } from '@/shared/@type/interface';
import HeaderNav from '@/components/ONav.vue';
import { useRouter } from 'vitepress';
import logo from '@/assets/logo.svg';

const router = useRouter();

const navItems = [
  {
    id: 'download',
    label: '下载',
    path: 'download',
  },
  {
    id: 'learning',
    label: '学习',
    path: '',
    children: [
      { id: 'docs', label: '文档', path: 'docs' },
      { id: 'mooc', label: '慕课', path: 'mooc' },
      { id: 'knowledge', label: '知识地图', path: 'knowledge' },
    ],
  },
  {
    id: 'community',
    label: '社区',
    path: '',
    children: [
      { id: 'contribution', label: '贡献', path: 'contribution' },
      { id: 'team', label: '团队', path: 'team' },
      { id: 'communication', label: '交流', path: 'communication' },
      { id: 'evangelist', label: '布道', path: 'evangelist' },
      { id: 'security', label: '安全', path: 'security' },
    ],
  },
  {
    id: 'information',
    label: '资讯',
    path: '',
    children: [
      { id: 'news', label: '新闻', path: 'news' },
      { id: 'blogs', label: '博客', path: 'blogs' },
      { id: 'events', label: '活动', path: 'events' },
      { id: 'video', label: '视频', path: 'video' },
    ],
  },
  {
    id: 'code',
    label: '代码',
    path: '',
    children: [
      { id: 'gitee', label: 'Gitee', path: 'gitee' },
      { id: 'github', label: 'Github', path: 'github' },
    ],
  },
];
const activeNav = ref<string>();
const handleNavClick = (item: NavItem) => {
  activeNav.value = item.path;
};

const goHome = () => {
  router.go('/en/news/');
};

const isSearch = ref(true);
const handleSearch = () => {
  isSearch.value = false;
};

// 移动端菜单
const isMobileMenu = ref(false);
let { body } = document;
const mobileMenuPanel = () => {
  if (isMobileMenu.value) {
    isMobileMenu.value = false;
    body.className = '';
  } else {
    isMobileMenu.value = true;
    body.className = 'overflow';
  }
};
const handleMenuLayer = () => {
  isMobileMenu.value = false;
  body.className = '';
};
</script>
<template>
  <div class="app-header wrapper">
    <div class="header-logo">
      <img
        class="header-logo-img"
        alt="openLookeng logo"
        :src="logo"
        @click="goHome"
      />
    </div>
    <div class="mobile-menu-icon" @click="mobileMenuPanel">
      <!-- <SvgIcon v-if="!isMobileMenu" class="menu-mo" name="menu"></SvgIcon>
      <SvgIcon v-else class="menu-mo" name="x"></SvgIcon> -->
    </div>
    <div class="header-content">
      <div v-if="isSearch" class="header-nav">
        <header-nav
          :nav-items="navItems"
          :default-active="activeNav"
          @nav-click="handleNavClick"
        ></header-nav>
      </div>
      <div v-if="!isSearch" class="header-search">
        <div class="header-search-box">
          <!-- <SvgIcon class="icon" name="search"></SvgIcon> -->
          <input type="text" placeholder="请输入关键词" class="search-input" />
          <!-- <SvgIcon
            class="clear-icon icon"
            name="x"
            @click="isSearch = true"
          ></SvgIcon> -->
        </div>
        <div class="header-search-result"></div>
      </div>
      <div v-if="isSearch" class="header-tool">
        <span class="lang">EN</span>
        <div class="header-tool-search" @click="handleSearch">
          <!-- <SvgIcon class="icon" name="search"></SvgIcon> -->
        </div>
      </div>
    </div>
    <div class="mobile-search-icon">
      <!-- <SvgIcon class="icon" name="search"></SvgIcon> -->
    </div>
  </div>
  <div
    class="mobile-menu"
    :class="{ active: isMobileMenu }"
    @click="handleMenuLayer"
  >
    <div class="mobile-menu-side">
      <div class="mobile-nav">
        <a
          v-for="item in navItems"
          :key="item.id"
          class="link"
          :href="item.path"
          >{{ item.label }}</a
        >
      </div>
      <div class="mobile-tools"></div>
    </div>
    <div class="mobile-menu-content"></div>
  </div>
</template>
<style lang="scss">
.overflow {
  overflow: hidden;
}
.app-header {
  height: 80px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 99;

  .header-logo {
    overflow: hidden;
    margin-right: 40px;
    cursor: pointer;
    &-img {
      height: 40px;
    }
  }
  .mobile-menu-icon {
    display: none;
    .menu-mo {
      font-size: 20px;
      color: #000;
    }
  }
  .mobile-search-icon {
    display: none;
  }
  .header-content {
    display: flex;
    justify-content: space-between;
    flex: 1;
    height: 100%;
    .header-nav {
      height: 100%;
      display: flex;
      flex: 1;
    }
    .header-search {
      padding: 28px 0 28px 120px;
      width: 900px;
      &-box {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #aaa;
        padding-bottom: 10px;
        .search-input {
          outline: none;
          border: 0 none;
          line-height: 24px;
          height: 24px;
          flex: 1;
          font-size: 14px;
          padding: 0 10px;
        }
        .clear-icon {
          cursor: pointer;
        }
      }
    }
    .header-tool {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .lang {
        color: #000;
        letter-spacing: 0.08em;
        font-size: 16px;
        margin-right: 20px;
      }
      &-search {
        cursor: pointer;
      }
    }
    .icon {
      font-size: 18px;
      color: #555;
    }
  }
}

.mobile-menu {
  width: 100%;
  position: fixed;
  left: 0;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 0;
  visibility: hidden;
  border-top: 1px solid #e4e6ed;
  background: rgba(0, 0, 0, 0.4);
  z-index: 111;
  display: none;
  height: calc(100vh - 48px);
  &.active {
    opacity: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    visibility: visible;
    .mobile-menu-side,
    .mobile-menu-content {
      left: 0;
      opacity: 1;
    }
  }
  &-side {
    left: -100%;
    background: #f5f6f8;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #000;
    min-width: 164px;
    opacity: 0;
    position: relative;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    border-right: 1px solid #e4e6ed;
    overflow-y: scroll;
    .mobile-nav {
      .link {
        display: block;
        font-size: 12px;
        line-height: 48px;
        color: #000;
        padding: 0 16px;
      }
    }
  }
  &-content {
  }
}

@media screen and (max-width: 994px) {
  .app-header {
    height: 48px;
    justify-content: space-between;
    .header-logo-img {
      height: 32px;
      margin: 0;
    }
    .mobile-menu-icon {
      display: block;
      order: -1;
    }
    .header-content {
      display: none;
    }
    .mobile-search-icon {
      display: block;
      .icon {
        font-size: 20px;
        color: #555;
      }
    }
  }
}
</style>
